<template>
	<div class="page">
		<pwd v-if="showPwd" @confirm="confirm"></pwd>
		<div class="main-first">
			<span class="txt-first">健康险</span>
			<p class="txt-second">xx保险产品</p>
		</div>
		<div class="main-second csl-disable-remote-control">
			<Tabs type="card" class="demo" @on-click="onSelect">
				<TabPane label="保费信息"> </TabPane>
				<TabPane label="保障范围"> </TabPane>
				<TabPane label="保单信息"> </TabPane>
			</Tabs>
			<div class="pagelink-content">
				<div v-if="curItem == 0">
					<div class="main-three">
						<span class="txt-three">为了保障您的合法权益，请您务必仔细阅读<a href="#">《保费信息》</a>、<a href="#">《保障范围》</a>、<a href="#">《保单信息》</a>等内容。</span>
					</div>
					<div class="main-four">
						<img src="../../../static/image/pay.png" class="icon isTrigger" @click="next" />
					</div>
				</div>
				<div v-if="curItem == 1">
					<div class="main-three">
						<span class="txt-three">为了保障您的合法权益，请您务必仔细阅读<a href="#">《保费信息》</a>、<a href="#">《保障范围》</a>、<a href="#">《保单信息》</a>等内容。</span>
					</div>
					<div class="main-six">
						<span class="txt-four">保障范围确认</span>
						<p class="txt-five">您好，您将获得如下保障：</p>
						<ul>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">一般医疗保险责任</span>
									<span class="txt-seven">300万元</span>
								</span>
							</li>
							<li>
								<span class="txt-nine">被保险人因遭受意外伤害事故或在等待期后因患疾病，在二级或以上的公立医院普通部接受治疗的，本产品承担必需且合理的住院医疗费用、住院前7日（含住院当日）和出院后30日（含出院当日）内的门急诊医疗费用（与该次住院原因相同）、特殊门诊医疗费用和门诊手术费用。</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">重大疾病医疗保险责任</span>
									<span class="txt-seven">600万元</span>
								</span>
							</li>
							<li>
								<span class="txt-nine">指被保险人因遭受意外伤害事故或在等待期后因患重大疾病，在二级或以上的公立医院普通部接受治疗的，本产品承担必需且合理的重大疾病住院医疗费用、住院前7日（含住院当日）和出院后30日（含出院当日）内的重大疾病门急诊医疗费用（与该次住院原因相同）、重大疾病特殊门诊医疗费用和重大疾病门诊手术费用。</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">恶性肿瘤质子重离子医疗保险责任</span>
									<span class="txt-seven">600万元</span>
								</span>
							</li>
							<li>
								<span class="txt-nine">被保险人在等待期后确诊初次罹患恶性肿瘤，在上海市质子重离子医院接受质子重离子治疗的，本产品承担相关的医疗费用。被保险人在上海质子重离子医院接受的化学疗法、肿瘤免疫疗法、肿瘤内分泌疗法和肿瘤靶向疗法所产生的药品费不在保障范围内。</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">重大疾病保险责任</span>
									<span class="txt-seven">1万元</span>
								</span>
							</li>
							<li>
								<span class="txt-nine">被保险人因遭受意外伤害事故或在等待期后确诊初次罹患本产品定义的重大疾病，本产品按载明的保险金额给付重大疾病保险金。</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">重大疾病住院津贴保险责任</span>
									<span class="txt-seven">100元/天</span>
								</span>
							</li>
							<li>
								<span class="txt-nine">被保险人因遭受意外伤害事故或在等待期后确诊初次罹患本产品定义的重大疾病，本产品按被保险人每次实际住院天数扣除每次住院免赔天数后乘以约定的重大疾病住院日津贴额向被保险人给付重大疾病住院津贴保险金。</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">家庭共享免赔额</span>
									<span class="txt-seven">1万元</span>
								</span>
							</li>
							<li>
								<span class="txt-nine">本产品同一订单下的所有被保险人共享1万元年免赔额。如某一被保险人等待期后罹患本产品约定的重大疾病且在医院接受治疗的，则自确诊之日起，该被保险人保险合同的免赔额为0。订单下剩余被保险人共享1万元年免赔额。</span>
							</li>
						</ul>
					</div>
					<div class="main-seven">
						<span class="txt-fifteen">本产品由xx保险有限公司承保</span>
					</div>
				</div>
				<div v-if="curItem == 2">
					<div class="main-three">
						<span class="txt-three">为了保障您的合法权益，请您务必仔细阅读<a href="#">《保费信息》</a>、<a href="#">《保障范围》</a>、<a href="#">《保单信息》</a>等内容。</span>
					</div>
					<div class="main-six">
						<span class="txt-four">保单信息确认</span>
						<p class="txt-five">请您认真核对表单：</p>
						<ul>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">为谁购买保险</span>
									<span class="txt">本人</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">被保人姓名</span>
									<span class="txt mask-name">陈卓</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">保险金额</span>
									<span class="txt">20万元</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">交费方式</span>
									<span class="txt">按月交费</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">交费期</span>
									<span class="txt">十年</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">交费银行</span>
									<span class="txt">交费银行</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">首期付款</span>
									<span class="txt">200元</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">保单号</span>
									<span class="txt privacy">825099A</span>
								</span>
							</li>
						</ul>
						<div class="main-tab-first">
							<hr />
						</div>
						<span class="txt-four-second">个人信息</span>
						<ul>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">姓名</span>
									<span
										class="
                                            txt
                                            pabiss-name-/(\w{1})\w*(\w{1})/
                                        "
										>张好多岁</span
									>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">性别</span>
									<span class="txt">男</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">证件类型</span>
									<span class="txt">身份证</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">出生日期</span>
									<span class="txt mask-birthday">1990.01.01</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">证件号码</span>
									<span
										class="
                                            txt
                                            pabiss-idCard-/(\w{2})\w*(\w{2})/
                                        "
										>460108198909150114</span
									>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">联系方式</span>
									<span
										class="
                                            pabiss-mobile-/(\w{1})\w*(\w{1})/
                                            txt
                                        "
									>
										137****1999
									</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">银行卡</span>
									<span
										class="
                                            txt
                                            pabiss-bankIdCard-/(\w{4})\w*(\w{4})/
                                        "
										>6222600110059521320</span
									>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">中国大陆驾照</span>
									<span class="txt mask-driver-licence-mainland">110101199001011924</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">即时通讯号</span>
									<span class="txt mask-im-number">41623334</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">护照</span>
									<span class="txt mask-passport">E09994688</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">非中国大陆驾照</span>
									<span class="txt mask-driver-licence-non-mainland">W60527918C</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">军官证</span>
									<span class="txt mask-military-id">3747226</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">回乡证</span>
									<span class="txt mask-home-visiting-certificate">H12345678</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">通行证</span>
									<span class="txt mask-pass">C12345678</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">密码</span>
									<span class="txt mask-password">123456</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">会话ID</span>
									<span class="txt mask-session-id">KrHbNLvH0SaEEdknAAKI</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">Email</span>
									<span class="txt mask-email">info@xxx.cn</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">联系电话</span>
									<span class="txt mask-phone-number">4008013824</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">传真</span>
									<span class="txt mask-fax">010-82716601</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">联系地址</span>
									<span class="pabiss-address-/([^-]+$)/ txt">山东省-青岛市-市南区-山东路10号</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">详细地址</span>
									<span
										class="
                                            txt
                                            pabiss-addressDetails-/.*/
                                            txt
                                        "
										>山东路10号</span
									>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">车牌号</span>
									<span class="txt mask-car-number">沪ART861</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">车架号</span>
									<span class="txt mask-vehicle-identify-number">LSGPC54U8EF123456</span>
								</span>
							</li>
							<li>
								<span class="txt-eight">
									<i class="box"></i>
									<span class="txt-six">发动机号</span>
									<span class="txt mask-engine-number">133510565</span>
								</span>
							</li>
						</ul>
					</div>
					<div class="main-seven">
						<span class="txt-fifteen">本产品由xx保险有限公司承保</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Pwd from './Pwd.vue';
export default {
	components: { Pwd },
	data() {
		return {
			curItem: 0,
			showPwd: false
		};
	},
	methods: {
		onSelect(index) {
			console.log('onSelect : ', index);
			this.curItem = index;
		},

		// 确认无误，下一步
		next() {
			this.showPwd = true;
			// this.$router.push({ path: '/pagefirst' });
		},

		confirm() {
			this.$router.push({ path: '/pagefirst' });
		}
	}
};
</script>

<style scoped>
#app {
	overflow: hidden;
}
.txt {
	margin-left: 12px;
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	float: right;
	margin-right: 20px;
}
li {
	margin-top: 20px;
}
.page {
	width: 100%;
	height: 100%;
	background-image: url('../../../static/image/bg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	font-family: serif;
}
.main-first {
	padding-top: 60px;
	width: 122px;
}
.txt-first {
	width: 211px;
	height: 65px;
	font-size: 20px;
	font-family: PingFang SC;
	font-weight: 600;
	color: #fffae3;
	line-height: 20px;
}
.txt-second {
	width: 162px;
	height: 50px;
	font-size: 20px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #fffae3;
	line-height: 20px;
	padding-top: 12px;
}
.main-second {
	margin: 0 auto;
	height: 90%;
	padding: 50px 4%;
}
.main-three {
	margin-top: 10px;
}
.icon {
	width: 100%;
	height: 100%;
}
.main-four {
	width: 90%;
	margin: 0 auto;
	margin-top: 18px;
}
.main-six {
	border: 2px solid #f2ceb1;
	width: 96%;
	margin: 0 auto;
	margin-top: 10px;
	height: 100%;
	overflow-y: auto;
	border-radius: 12px;
}
.txt-four {
	width: 106px;
	height: 46px;
	font-size: 16px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 54px;
	display: flex;
	align-items: flex-start;
	margin-left: 10px;
	border-bottom: 6px solid #fb8f6a;
	padding-top: 8px;
}
.txt-four-second {
	width: 106px;
	height: 46px;
	font-size: 16px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	line-height: 54px;
	display: flex;
	align-items: flex-start;
	margin-left: 10px;
	border-bottom: 4px solid #fb8f6a;
	padding-top: 8px;
}
.txt-five {
	font-size: 18px;
	color: #fb8f6a;
	margin-top: 10px;
}
.box {
	clear: both;
	margin-top: 3px;
	width: 9px;
	height: 9px;
	background: #fb6f37;
	display: inline-block;
	margin-left: 14px;
	float: left;
}
.txt-six {
	margin-left: 12px;
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #000000;
	float: left;
	margin-bottom: 10px;
}
.txt-seven {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fa6e25;
	display: block;
	float: right;
	margin-right: 10px;
}
.txt-eight {
	margin-top: 16px;
}
.txt-nine {
	display: flex;
	align-items: flex-start;
	margin-left: 14px;
	width: 90%;
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #232323;
}

.txt-ten {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fa6e25;
	margin-left: 70px;
}

.txt-eleven {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fa6e25;
	margin-left: 10px;
}
.txt-twelve {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fa6e25;
	margin-left: 108px;
}
.txt-thirteen {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fa6e25;
	margin-left: 46px;
}
.txt-fourteen {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #fa6e25;
	margin-left: 120px;
}
.txt-fifteen {
	font-size: 12px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #f2ceb1;
}
.main-seven {
	margin-top: 10px;
}
hr {
	height: 1px;
	background: #f2ceb1;
	width: 90%;
	margin: 0 auto;
}
.main-tab-first {
	clear: both;
	padding-top: 10px;
}
</style>

<style>
.page .demo .ivu-tabs-tabpane .txt-three {
	font-size: 4px;
	font-weight: 400;
	padding-top: 10px;
}
.page .demo .ivu-tabs-content {
	margin: 0 auto;
	/* height: 90%; */
	height: 0;
}
.page .demo {
	/* height: 100%; */
	height: 0;
	overflow: unset;
}
.page .demo .ivu-tabs-content .ivu-tabs-tabpane {
	background-color: #fff1e6;
	margin: 0 auto;
}
.page .demo .ivu-tabs-bar {
	border: 0px;
	margin-bottom: 0px;
}
.page .demo .ivu-tabs-bar .ivu-tabs-nav-container {
	height: 44px;
}
.page .demo .ivu-tabs-nav-prev,
.ivu-tabs-nav-next {
	display: none;
}
.page .demo .ivu-tabs-bar .ivu-tabs-nav-container .ivu-tabs-nav-wrap .ivu-tabs-nav-scroll .ivu-tabs-nav .ivu-tabs-tab {
	background: #e2670b;
	width: 33.33%;
	height: 100%;
	color: white;
	line-height: 44px;
	font-size: 16px;
	font-weight: 500;
	border: 0px;
	margin: 0;
}
.page .demo .ivu-tabs-nav-scroll {
	overflow: initial;
}
.page .demo .ivu-tabs-bar .ivu-tabs-nav-container .ivu-tabs-nav-wrap .ivu-tabs-nav-scroll .ivu-tabs-nav .ivu-tabs-tab-active {
	background: #fee7d5;
	color: #f45333;
}
.page .demo .ivu-tabs-bar .ivu-tabs-nav-container .ivu-tabs-nav-wrap .ivu-tabs-nav-scroll .ivu-tabs-nav {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: space-between;
}
.pagelink-content {
	display: flex;
	height: 100%;
	margin-top: 44px;
	padding-bottom: 100px;
	background-color: #fff1e6;
	margin: 0 auto;
	height: 96%;
	overflow-y: auto;
	border-radius: 12px;
	padding-top: 50px;
	height: 94%;
}
</style>
